{extend name="layout" /}
{block name="css"}
<style>
	html {
		height: 100%;
	}
	
	body {
		height: 100%;
	}
</style>
{/block}
{block name="content"}
<div class="mui-content">
	<div id='list' class="mui-indexed-list">
		<div class="search-block search-block-small">
			<div class="mui-input-row mui-search mui-indexed-list-search">
				<input type="search" class="mui-input-clear mui-indexed-list-search-input" value="" placeholder="搜索">
			</div>
		</div>
		<div class="mui-indexed-list-bar">
			<a>A</a>
			<a>B</a>
			<a>C</a>
			<a>D</a>
			<a>E</a>
			<a>F</a>
			<a>G</a>
			<a>H</a>
			<a>I</a>
			<a>J</a>
			<a>K</a>
			<a>L</a>
			<a>M</a>
			<a>N</a>
			<a>O</a>
			<a>P</a>
			<a>Q</a>
			<a>R</a>
			<a>S</a>
			<a>T</a>
			<a>U</a>
			<a>V</a>
			<a>W</a>
			<a>X</a>
			<a>Y</a>
			<a>Z</a>
			<a>#</a>
		</div>
		<div class="mui-indexed-list-alert"></div>
		<div class="mui-indexed-list-inner">
			{eq name=":empty($list)" value="true"}
			<div class="mui-indexed-list-empty-alert">没有数据</div>
			{/eq}
			<ul class="mui-table-view max">
				{volist name="list" id="v"}
				<li data-group="{$v.title}" class="mui-table-view-divider mui-indexed-list-group">{$v.title}</li>
				<!--cell-->
				{volist name="v.list" id="vc"}
				<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">
					<div class="tm-flex flex-align-center">
						<a href="{:url('mysubord_detail', ['userid'=>$vc.userid, 'token'=>$token, 'timestamp'=>time()])}" class="tm-flex-1">
							<div class="tm-flex flex-align-center">
								<div class="tm-atav tm-flex-head">
									<div class="tm-location-parent">
										<div class="tm-location-img" style="background-image: url({$vc.avatar});"></div>
										<img class="redundant-img" src="{$images_path}px-1.png" alt="" width="100">
									</div>
								</div>
								<div class="tm-label-no">
									<span class="tm-df-size tm-font-boldx">{$vc.realname}</span>
								</div>
							</div>
						</a>
						<div class="tm-tab-cell-right">
							<div class="tm-flex">
								<div class="tm-cell-operation-group tm-icon-item">
									<a href="tel:{$vc.phone}" class="tm-icon tm-icon-btn">
										<img src="{$images_path}phone.png" alt="" width="12" height="12" />
									</a>
									<a href="sms:{$vc.phone}" class="tm-icon tm-icon-btn">
										<img src="{$images_path}weixin-gray.png" alt="" width="12" height="12" />
									</a>
								</div>
							</div>
						</div>
					</div>
				</li>
				{/volist}
				{/volist}
			</ul>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	mui.ready(function() {
		var header = document.querySelector('header.mui-bar');
		var list = document.getElementById('list');
		//calc hieght
		list.style.height = (document.body.offsetHeight) + 'px';
		//create
		window.indexedList = new mui.IndexedList(list);
	});
</script>
{/block}